<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="icon" href="data:;base64,=">
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
    </style>
</head>
<body>
<div id="app">
<el-container >
    <el-aside width="200px">
        <el-menu
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
        >
<!--            遍历页面的functions元素-->
            <el-submenu :index="fun.id" v-for="fun in functions" >
                <template slot="title">
                    {{fun.menuName}}</template>
                <el-menu-item-group>
<!--                    遍历每个functions元素中的下级subFunctions元素-->
                    <el-menu-item  v-for="cfun in fun.subMenus">
                        <a :href="cfun.menuUrl"  target="main">{{cfun.menuName}}</a>
                    </el-menu-item>
                    </el-menu-item-group>
            </el-submenu>
        </el-menu>
    </el-aside>
    <el-container>
<!--        顶部菜单-->
        <el-header style="text-align: right; font-size: 12px">
            <el-dropdown>
                <i class="el-icon-setting" style="margin-right: 15px"></i>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>查看</el-dropdown-item>
                    <el-dropdown-item>新增</el-dropdown-item>
                    <el-dropdown-item>删除</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <span></span>
        </el-header>
<!--        右侧列表-->
        <el-main>
                <iframe style="height: 100%;width:100%" src="about:blank" name="main"></iframe>
        </el-main>
    </el-container>
</el-container>
</div>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app",
        data() {
           return {
               //设置functions权限接收挂载获得的数据
               functions:null
           }
        },
        mounted(){
            //通过axios的get请求权限获得数据，判断数据是否存在，存在则复制给当前页面的functions
            axios.get("/functions/username").then(value => {
                if (value.data.code==1){
                    this.functions=value.data.data;
                }
            })
        }
    });
</script>
</body>
</html>